@use '../core' as *;

button#{$selector-exclude-grid} {
    font-family: var(--text-font-family);
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
}

button#{$selector-exclude-grid},
input[type='reset']#{$selector-exclude-grid},
input[type='submit']#{$selector-exclude-grid},
.button,
.button-secondary,
.button-tertiary {
    appearance: none;
    display: inline-block;
    font-weight: var(--text-bold);
    padding: 0.375em 1em 0.5em;
    white-space: nowrap;
    border-radius: 6px;
    background-color: var(--color-button-primary-bg);
    color: var(--color-button-primary-fg);
    border: 1px solid var(--color-button-primary-border);
    box-shadow:
        0 0 0 $spacing-size-1 transparent,
        var(--shadow-xs);
    cursor: pointer;
    outline: none;
    transition:
        background-color $transition-default-timing,
        border $transition-default-timing,
        box-shadow $transition-default-timing;

    &:hover,
    &.hover {
        background-color: var(--color-button-primary-bg-hover);
        color: var(--color-button-primary-fg);

        &[aria-disabled] {
            background-color: var(--color-button-primary-bg);
        }
    }

    &:active {
        background-color: var(--color-button-primary-bg-active);
        transition: background-color 0.125s ease-in-out;
    }

    &:focus-visible,
    &.focus {
        box-shadow:
            0 0 0 $spacing-size-1 var(--color-button-primary-shadow-focus),
            var(--shadow-xs);
    }

    &:disabled,
    &[disabled],
    &[aria-disabled],
    &.disabled {
        background-color: var(--color-button-disabled-bg);
        color: var(--color-button-disabled-fg);
        border: 1px solid var(--color-button-disabled-border);
        cursor: default;
    }

    /* Disable pointer events for `disabled` but not `aria-disabled` */
    &:disabled,
    &[disabled],
    &.disabled {
        pointer-events: none;
    }

    .icon {
        --icon-size: 2em;
        fill: var(--color-button-primary-fg);
        display: inline-block;
        position: relative;
        bottom: 0.05em;
        margin: -1em 0.125em -1em 0;
    }
}

// Fix hover issues for links with .button class
a.button:hover {
    color: var(--color-button-primary-fg);
}

.button-secondary {
    background-color: var(--color-button-secondary-bg);
    color: var(--color-button-secondary-fg);
    border: 1px solid var(--color-button-secondary-border);

    &:hover,
    &.hover {
        color: var(--color-button-secondary-fg);
        background-color: var(--color-button-secondary-bg-hover);
    }

    &:active {
        background-color: var(--color-button-secondary-bg-active);
    }

    .icon {
        fill: var(--color-button-secondary-fg);
    }
}

// Fix hover issues for links with .button-secondary class
a.button-secondary:hover {
    color: var(--color-button-secondary-fg);
}

.button-tertiary {
    background-color: var(--color-button-tertiary-bg);
    color: var(--color-button-tertiary-fg);
    border: 1px solid var(--color-button-tertiary-border);

    &:hover,
    &.hover {
        background-color: var(--color-button-tertiary-bg-hover);
        color: var(--color-button-tertiary-fg);
    }

    &:active {
        background-color: var(--color-button-tertiary-bg-active);
    }

    .icon {
        fill: var(--color-button-tertiary-fg);
    }
}

// Fix hover issues for links with .button-tertiary class
a.button-tertiary:hover {
    color: var(--color-button-tertiary-fg);
}

.button-secondary,
.button-tertiary {
    &:disabled,
    &[disabled],
    &[aria-disabled],
    &.disabled {
        color: var(--color-button-disabled-fg);
    }

    &:hover,
    &.hover {
        &[aria-disabled] {
            background-color: var(--color-button-disabled-bg);
        }
    }
}

.button-style-none,
.button-as-link {
    appearance: none;
    padding: 0;
    text-align: left;
    font-weight: var(--text-regular);
    border: none;
    background-color: transparent;
    box-shadow: none;

    &:hover,
    &.hover,
    &:disabled,
    &[disabled],
    &[aria-disabled],
    &.disabled {
        background-color: transparent;
        border: none;
    }

    &:focus-visible,
    &.focus {
        box-shadow: none;
    }

    &:hover,
    &.hover {
        &[aria-disabled] {
            background-color: transparent;
            color: var(--color-button-disabled-fg);
        }
    }
}

.button-style-none {
    color: var(--color-fg-primary);
}

.button-as-link {
    color: var(--color-link);
    transition: color $transition-default-timing;

    &:hover,
    &.hover {
        color: var(--color-link-hover);
    }
}
